<template>
  <div class="app-container">
    <el-row>
        <el-col :xs="24" :sm="24" :lg="24" class="primary">工作台</el-col>
    </el-row>
    <el-row>
        <el-col :xs="24" :sm="24" :lg="24" class="border"></el-col>
    </el-row>
  
    <!--看板待办-->
  <div class="myschedule">
    <div class="title">
        <h2 style="color: #409EFF;">我的待办</h2>
        <!-- <svg-icon iconClass="schedule" className="schedule"></svg-icon> -->
    </div>
    <div class="myProject">
      <template>
        <el-table
          :data="schedule"
          border
          style="width: 100%"
          :header-cell-style="{background:'#eef1f6'}">
          <el-table-column
            label="待办项"
            align="center"
            >
            <template>
               <div>数据补录</div> <!--{{ scope.$index + 1 }}. -->
            </template>
          </el-table-column>
          <el-table-column
            prop="schedule_details"
            label="待办范围"
            align="center"
            >
          </el-table-column>
          <el-table-column
            prop="schedule_range"
            label="待办内容"
            align="center"
            >
          </el-table-column>
          <el-table-column
            prop="action"
            label="操作"
            align="center"
            >
            <template>
              <el-button @click="handleClick" type="text" size="small">跳转补录</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
  </div>
    <div v-if="user">
      <!-- <el-row :gutter="20">

        <el-col :span="6" :xs="24">
          <user-card :user="user" />
        </el-col>

        <el-col :span="18" :xs="24">
          <el-card>
            <el-tabs v-model="activeTab">
              <el-tab-pane label="Activity" name="activity">
                <activity />
              </el-tab-pane>
              <el-tab-pane label="Timeline" name="timeline">
                <timeline />
              </el-tab-pane>
              <el-tab-pane label="Account" name="account">
                <account :user="user" />
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </el-col>

      </el-row> -->
      <div class="myProject">
        <header>
          <el-row>
            <el-col :xs="24" :sm="24" :lg="24">
              <div class="title">
                <h2 style="color: #409EFF;">我的项目</h2>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="24" :sm="24" :lg="24" class="border"></el-col>
          </el-row>
        </header>

        <section>
          <div class="condition-box">
            <el-row>
              <el-col :xs="24" :sm="24" :lg="24">
                <el-form ref="form" size="mini">               
                  <el-row>
                    <el-col :xs="24" :sm="24" :lg="6" class="form">
                      <el-input v-show="activeIndex == 'all'" v-model="search_project" placeholder="搜索事业群，项目名，部门，PM"><el-button type="success" size="mini">搜索</el-button></el-input>
                      <el-button v-show="activeIndex == 'all'" class="search" @click="search" type="primary" size="mini">搜索</el-button>                       
                    </el-col>

                    <el-col :xs="24" :sm="24" :lg="activeIndex == 'all'?18:24">
                      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                        <el-menu-item index='all'>
                          我的项目
                        </el-menu-item>
                        <el-menu-item index='fav'>
                          已收藏
                        </el-menu-item>                       
                      </el-menu>
                    </el-col>

                    <!-- <el-col :xs="24" :sm="24" :lg="18">                    
                      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                        <el-menu-item index='imported'>
                          已导入
                        </el-menu-item>

                        <el-menu-item index='fav'>
                          收藏
                        </el-menu-item>

                        <el-submenu index='3'>
                          <template slot="title">项目状态</template>
                            <el-menu-item index="3-1">所有</el-menu-item>
                            <el-menu-item index="3-2">变更</el-menu-item>
                            <el-menu-item index="3-3">封存</el-menu-item>
                            <el-menu-item index="3-4">立项</el-menu-item>
                            <el-menu-item index="3-5">结项</el-menu-item>                                                         
                        </el-submenu>

                        <el-submenu index='4'>
                          <template slot="title">项目等级</template>
                            <el-menu-item index="4-1">A类</el-menu-item>
                            <el-menu-item index="4-2">B类</el-menu-item>
                            <el-menu-item index="4-3">C类</el-menu-item> 
                            <el-menu-item index="4-4">D类</el-menu-item>                                                        
                        </el-submenu>
                      </el-menu>                     
                    </el-col> -->
                  </el-row>
                </el-form>             
              </el-col>
            </el-row>
          </div>

          <div class="tab-content">
            <el-row>
              <el-col :xs="24" :sm="24" :lg="24">
                <el-table :data="tableData" style="width: 100%">                 
                  <el-table-column align="center" label="基本信息">
                    <el-table-column
                      prop="project_status"
                      label="状态"
                      align="center"
                      width="80">
                      <template slot-scope="scope">
                        <div>{{ scope.row.project_status }}</div>
                      </template>
                    </el-table-column>
                    
                    <el-table-column
                      label="阶段点"
                      align="center"
                      width="100">
                      <template slot-scope="scope">
                        <el-button type="primary" size="mini">{{ scope.row.tg }}</el-button>
                      </template>
                    </el-table-column>

                    <el-table-column
                      prop="project_name"
                      label="项目名"
                      align="center"
                      >
                    </el-table-column>
                    <el-table-column
                      prop="group_name"
                      label="事业群"
                      align="center"
                      >
                    </el-table-column>
                    <el-table-column
                      prop="dept_name"
                      label="部门"
                      align="center"
                      >
                    </el-table-column>

                    <el-table-column
                      prop="pm"
                      label="PM"
                      align="center"
                      >
                    </el-table-column>

                    <el-table-column
                      prop="level"
                      label="等级"
                      align="center"
                      >
                    </el-table-column>
                  </el-table-column>

                  <el-table-column align="center" label="项目评分">
                    <el-table-column                     
                      label="总分"
                      align="center"
                      width="80"
                      >
                      <template slot-scope="scope">
                        <span>{{ getPoints(scope.row.scores.devops, scope.row.scores.validation, scope.row.scores.qa) }}</span>
                      </template>
                    </el-table-column>

                    <el-table-column
                      prop="point"
                      label="操作"
                      align="center"
                      >
                      <template slot-scope="scope">
                        <el-button v-if="!scope.row.favorite" @click="favProject(scope.row.project_id, scope.$index)" icon="el-icon-star-on"></el-button>
                        <el-button v-else @click="favProject(scope.row.project_id, scope.$index)" type="primary" icon="el-icon-star-on"></el-button>
                        <el-button style="margin-top: 5px;" @click="dialog(scope.$index)" icon="el-icon-warning">查看</el-button>
                      </template>
                    </el-table-column>
                  </el-table-column>
                  
                </el-table>
              </el-col>
            </el-row>

            <el-row class="marT" style="padding-bottom: 20px">
              <el-col :xs="24" :sm="24" :lg="24">
                <el-pagination class="marT"
                    :page-size="pagesize"                                                  
                    @size-change="tableSizeChange"
                    @current-change="tableCurrentImportDeptChange"
                    :current-page="tablecurrent"                               
                    layout="total, prev, pager, next, jumper"
                    style="text-align: center"
                    :total="total">
                </el-pagination>
              </el-col>
            </el-row>
          </div> 
          
          <el-dialog
            title="项目信息"
            :visible.sync="dialogVisible"
            width="50%"
            :before-close="handleClose">
            <!-- <span>{{ tableData[nowIndex].firdepartname }}</span> -->
            <el-row v-if="tableData.length">
              <el-col :xs="24" :sm="24" :lg="24">
                <el-row>
                  <el-col class="text-center" :xs="24" :sm="24" :lg="12">
                    <span class="projname">项目名:</span>
                    <span class="projcontent">{{ tableData[nowIndex].project_name }}</span>
                  </el-col>
                  <el-col class="text-center" :xs="24" :sm="24" :lg="12">
                    <span class="projname">配置管理:</span>
                    <span class="projcontent">{{ tableData[nowIndex].project_name }}</span>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col class="text-center" :xs="24" :sm="24" :lg="12">
                    <span class="projname">PMS ID:</span>
                    <span class="projcontent">{{ tableData[nowIndex].project_id }}</span>
                  </el-col>
                  <el-col class="text-center" :xs="24" :sm="24" :lg="12">
                    <span class="projname">项目经理:</span>
                    <span class="projcontent">{{ tableData[nowIndex].pm }}</span>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col class="text-center" :xs="24" :sm="24" :lg="12">
                    <span class="projname">立项时间:</span>
                    <span class="projcontent">{{ tableData[nowIndex].establish_date | getDate }}</span>
                  </el-col>
                  <el-col class="text-center" :xs="24" :sm="24" :lg="12">
                    <span class="projname">部门:</span>
                    <span class="projcontent">{{ tableData[nowIndex].dept_name }}</span>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
            <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="dialogVisible = false">取 消</el-button>              
            </span>
          </el-dialog>         
        </section>
      </div>
    </div>

    <!-- <h2 style="color: #409EFF;">消息提醒订阅</h2>
    <el-row class="marT owner-wrapper">
      <el-col :xs="24" :sm="24" :lg="24">
        <div class="owner-box">
          <div class="dataType" style="margin-right: 20px;">
            <span>订阅类型:</span>
            <el-select @change="changeType" v-model="type" placeholder="请选择提醒周期">
              <el-option
                v-for="item in typeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div v-if="ownerStatus" style="margin-right: 20px;">
            <span>事业群:</span>
            <el-select            
              v-model="owner"              
              filterable
              clearable
              collapse-tags              
              placeholder="请选择事业群">
              <el-option
                v-for="item in ownerOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>

          <div v-if="ownerStatus" v-show="isShowDate" class="remind-box" style="margin-right: 20px;">
            <span>定时提醒:</span>
            <el-select v-model="remind" placeholder="请选择提醒周期">
              <el-option
                v-for="item in remindOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>

          <div v-if="ownerStatus" class="remind-info">
            <span>提醒方式:</span>
            <el-select 
              multiple 
              v-model="remindInfo" 
              placeholder="请选择提醒周期"
              clearable
              collapse-tags>
              <el-option
                v-for="item in infoOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="updatedBtn">
            <el-button @click="ownerStatus = true" type="success" round v-show="!ownerStatus">订阅</el-button>
            <el-button @click="save" type="primary" round v-show="ownerStatus">保存</el-button>
          </div>
        </div>

        <div class="owner-table marT">
          <el-table
            :data="ownerTable"
            border
            :header-cell-style="{background:'#eef1f6'}" 
            style="width: 100%">
            <el-table-column 
              prop="group_name" 
              label="事业群" 
              align="center"
              >
            </el-table-column>

            <el-table-column                
              label="责任人邮箱" 
              align="center"
              >
              <template slot-scope="scope">
                <div v-html="scope.row.email ? scope.row.email : '——'"></div>
              </template>
            </el-table-column>

            <el-table-column           
              label="定时提醒周期" 
              align="center"
              v-if="type == 1"           
              >
              <template slot-scope="scope">
                <div v-if="scope.row.remind_cycle == 1">每日</div>
                <div v-else-if="scope.row.remind_cycle == 2">每周</div>
                <div v-else>每月</div>
              </template>
            </el-table-column>

            <el-table-column 
              prop="update_time" 
              label="订阅时间" 
              align="center"
              >
            </el-table-column>

            <el-table-column 
              label="订阅提醒方式" 
              align="center"
              >
              <template slot-scope="scope">
                <div v-if="scope.row.remind_way.length > 1">
                  <div :key="index" v-for="(item, index) in scope.row.remind_way">
                    <span v-html="item == 1 ? '邮件提醒' : '飞书提醒'"></span>
                  </div>
                </div>
                <div v-else v-html="scope.row.remind_way[0] == 1 ? '邮件提醒' : '飞书提醒'"></div>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination class="marT"
            v-show="ownerTotal > 10"
            :page-size="ownerSize"
            background                              
            @size-change="ownerSizeChange"
            @current-change="ownerCurrentChange"
            :current-page="ownerCurrent"                               
            layout="prev, pager, next"
            style="text-align: center"
            :total="ownerTotal">
          </el-pagination>
        </div>
      </el-col>
    </el-row> -->
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import qs from 'qs'
import UserCard from './components/UserCard'
import Activity from './components/Activity'
import Timeline from './components/Timeline'
import Account from './components/Account'
import { getToken, getName, removeToken, removeName } from '@/utils/auth'
import { getHeader, getPMSLink } from '@/app.config'
import http from '@/views/sys/axios'

export default {
  name: 'Profile',
  components: { UserCard, Activity, Timeline, Account },
  data() {
    return {
      header: getHeader(),
      name: getName(),
      user: {},
      ownerTable: [],
      ownerTotal: 0,
      ownerSize: 10,
      ownerCurrent: 1,
      // ownerStatus: false, 
      remind: 1,
      isShowDate: true,
      owner: '',
      type: 2,
      schedule: [],
      remindInfo: [],
      // typeOptions: [
      //   // {
      //   //   value: 1,
      //   //   label: '数据补录-质量KPI'
      //   // },
      //   {
      //     value: 2,
      //     label: '持续交付月报'
      //   }
      // ],
      // infoOptions: [
      //   {
      //     value: 1,
      //     label: '邮件推送'
      //   },
      //   {
      //     value: 2,
      //     label: '飞书推送'
      //   }
      // ],
      // remindOptions: [
      //   {
      //     value: 3,
      //     label: '每月'
      //   },
      //   {
      //     value: 2,
      //     label: '每周'
      //   },
      //   {
      //     value: 1,
      //     label: '每日'
      //   }
      // ],
      ownerOptions: [],
      nowIndex: 0,
      dialogVisible: false,
      activeTab: 'activity',
      activeIndex: 'all',
      tablecurrent: 1,
      filter: 'all',
      iscomplete: '',
      pagesize: 10,
      total: 0,
      search_project: '',
      tableData: [],   
      sizeForm: {
        name: ''
      }
    }
  },
  filters: {
    getDate(inputTime) {
      var date = new Date(inputTime);
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? ('0' + m) : m;
      var d = date.getDate();
      d = d < 10 ? ('0' + d) : d;
      var h = date.getHours();
      h = h < 10 ? ('0' + h) : h;
      var minute = date.getMinutes();
      var second = date.getSeconds();
      minute = minute < 10 ? ('0' + minute) : minute;
      second = second < 10 ? ('0' + second) : second;
      return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;
    }
  },
  computed: {
    
  },
  watch: {
    tablecurrent(newval) {
      if(newval) {
        this.getprojectlist()
      }
    },
    search_project(newval) {
      if(newval) {
        this.getprojectlist()
      } else if(newval === '') {
        this.activeIndex = 'all'
        this.filter = 'all'
        this.getprojectlist()
      }
    }
  },
  created() {
    // this.getUser()
    this.$nextTick(() => {
      this.getSchedule()
      // this.getGroupIds()
      this.getprojectlist()
      this.getOwnerTable()
    })
  },
  methods: {
    getPoints(a, b, c) {
      return a+b+c
    },
    ownerCurrentChange(val) {
      this.ownerCurrent = val
    },
    ownerSizeChange(val) {
      this.ownerSize = val
    },
    // changeType(val) {
    //   if(val == 2) {
    //     this.isShowDate = false
    //     this.ownerOptions.push({
    //       label: "集团",
    //       value: ''
    //     })
    //   } else {
    //     this.isShowDate = true
    //     this.ownerOptions.pop({
    //       label: "集团",
    //       value: ''
    //     })
    //   }
    //   this.getOwnerTable()
    // },
    getGroup(list) { // 处理初始化数据
      let arr = []
      if(list) {
        arr = list.map(val => {
          return {
            label: val.label,
            value: val.value
          }
        })
      }
      return arr
    },
    // getGroupIds() {
    //   http.get(`/api/indicator/examine_group_project`)
    //   .then(res => {
    //     if(res.code === 200) {          
    //       this.ownerOptions = this.getGroup(res.data)
    //       if(Array.isArray(this.ownerOptions) && this.ownerOptions.length) {
    //         this.owner = this.ownerOptions[0].value
    //       }
    //     }
    //   }).catch(error => {
    //     console.log(error)
    //   })
    // },
    async ownerData() {            
      let data = {} 
      data.type = this.type
      data.groupId = this.owner
      if(this.isShowDate) {
        data.cycle = this.remind
      } else {
        data.cycle = 0
      }
      data.way = this.remindInfo
      return new Promise((resolve, reject) => {
        http.post(`/api/notification/user/subscribe`, data)
        .then(res => {
          resolve(res)
        })
      })    
    },
    // async save() {
    //   let saveData = await this.ownerData()
    //   if(saveData.code === 200 && saveData.msg === 'success') {
    //     this.$message({
    //       showClose: true,
    //       message: '订阅成功!',
    //       type: 'success'
    //     });
    //     this.ownerStatus = false
    //     this.getOwnerTable()
    //     this.getSchedule()
    //   } else {
    //     this.$message({
    //       showClose: true,
    //       message: saveData.msg,
    //       type: 'error'
    //     });
    //   }
    // },
    getOwnerTable() {
      http.get(`/api/notification/user/subscribe?type=${this.type}`)
      .then(res => {
        if(res.code === 200) {
          this.ownerTable = res.data
          if(Array.isArray(this.ownerTable)) {
            this.ownerTotal = this.ownerTable.length
            this.ownerCurrent = 1
          }
        }
      })
    },
    getSchedule(){
      http.get(`/api/base/kb_schedule?user=${this.name}`)
      .then(res => {
        if(res.code === 200){
          this.schedule = res.data
        }
      })
    },
    tableSizeChange(val) {
      this.pagesize = val
    },
    tableCurrentImportDeptChange(val) {
      this.tablecurrent = val
    },
    handleClose() {
      this.dialogVisible = false
    },
    dialog(index) {
      this.dialogVisible = true
      this.nowIndex = index
    },
    favProject(id,index) {
      let url = process.env.VUE_APP_KANBAN_HOST + '/api/base/fav_project/'
			let data = {
				user: this.name,
				pms_project_id: id
      }
      
      this.$axios.post(url, data, {headers: getHeader()}).then(res => {
        if (res.data.status === 'success') {
					if (res.data.value === 1) {
            this.tableData[index].favorite = true           
					} else {
            this.tableData[index].favorite = false
            //console.log(this.$refs.ids)
						//document.getElementById(id).className = 'btn btn-sm btn-white';
					}
				} else {
          this.$message.error('收藏失败!');
        }
      })
    }, 
    handleSelect(key, keyPath) {
      // this.search_project = ''
      if(key === 'all') {
        this.activeIndex = 'all'
        this.filter = 'all'
        this.tablecurrent = 1
        this.nowIndex = 0
        this.getprojectlist()
      } else if(key === 'fav') {
        this.activeIndex = 'fav'
        this.filter = 'fav'
        this.tablecurrent = 1
        this.nowIndex = 0
        this.getprojectlist()
      }
    },
    search() {
      this.getprojectlist()
    },
    getprojectlist() {
      let url = process.env.VUE_APP_KANBAN_HOST +
				'/api/base/get_project_list/' +
				this.tablecurrent +
				'/?user=' +
				this.name +
				'&name=' +
				this.search_project +
				'&filter=' +
				this.filter +
				'&iscomplete=' +
        this.iscomplete;
        this.tableData = []
        this.nowIndex = 0
        this.$axios.get(url, { headers: this.header, timeout: 5000 }).then((res) => {          
          if(res.data.code == 401) {
            removeToken()
            removeName()
            this.$message.error('登陆超时或该账号已被登出，请您重新登录');
            this.$router.push({
              path: '/#/login'
            })
            return
          }
          if(res.data.details) {
            this.tableData = res.data.details
            this.total = res.data.count
          } else {
            this.tableData = res.data.data
            this.total = 0
          }       
          
        }).catch(function(err) {				
					console.log(err);
				})
    },
    getUser() {
      this.user = {
        name: this.name,
        role: this.roles.join(' | '),
        email: 'admin@test.com',
        avatar: this.avatar
      }
    },
    handleClick() {
        this.$router.push({
          path: '/documentation/datas'
        });
    }
  }
}
</script>

<style lang="scss" scoped>
  /deep/ .el-table th.gutter{
    display: table-cell!important;
  }
  .schedule{
    width: 200px;
  }
  .app-container {
    padding: 32px;
    background-color: rgb(240, 242, 245);
    position: relative;
  }
  .myschedule {
    background-color: #fff;
    padding: 10px;
  }
  .border{
      box-sizing: content-box;
      height: 0;
      overflow: visible;
      margin-top: 1rem;
      margin-bottom: 1rem;
      border: 0;
      border-top: 1px solid rgba(0,0,0,.1);
  }
  .primary{
      color: #409EFF;
      font-size: 30px;
      margin-top: 20px;
      margin-bottom: 10px;
      font-weight: 400;      
  }
  .app-container >>> .el-input__inner:focus {
    outline: none;
    border-color: #1682e6;
  }
  .app-container >>> .el-menu-item{
    height: 37px;
    line-height: 37px;
    border: 0;    
  }
  .app-container >>> .el-menu--horizontal>.el-menu-item{
    height: 37px;
    line-height: 37px;
  }
  .app-container >>> .el-menu--horizontal>.el-submenu .el-submenu__title{
    height: 37px;
    line-height: 37px;
  }
  .app-container >>> .el-submenu__title{
    height: 37px;
    line-height: 37px;   
  }
  .app-container >>> .el-menu{
    float: right;
    margin-right: 20px;
  }
  .app-container >>> .el-menu--horizontal>.el-menu-item.is-active {
    background: #1682e6;
    color: #fff;
    border: 0;
  }
  .app-container >>> .el-menu--horizontal>.el-submenu.is-active .el-submenu__title {
      background: #1682e6; 
      color: #fff;
      border: 0;
  }
  .app-container >>> .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #1682e6;
  }
   .app-container >>> .el-pagination.is-background .el-pager li:not(.disabled):hover {
     color: #1682e6; 
   }
  .projname{
    font-weight: 700;
    font-size: 15px;
    color: rgb(103, 106, 108);    
  }
  .text-center{ 
    text-align: center;
    margin-top: 8px;
  }
  .projcontent{
    font-size: 15px;
    color: rgb(103, 106, 108);
    margin-left: 5px;   
  }
  .app-container{
    .myProject{
      background: #fff;
      // margin: 0 70px;
      margin-top: 20px;
      .condition-box{
        margin-left: 20px;
      }
      .tab-content{
        margin-top: 20px;
        padding: 0 20px;
        padding-bottom: 20px;
        .marT{
          margin-top: 20px;
        }
      }
      .title{
        background-color: #ffffff;
        border-color: #e7eaec;
        border-image: none;
        border-style: solid solid none;
        border-width: 2px 0 0;
        color: inherit;
        margin-bottom: 0;
        padding: 8px 16px;
        min-height: 28px;
        position: relative;
        clear: both;
        h5{
          color: #409EFF;
          font-size: 20px;
          font-weight: 400;
        }
      }
      .border{
        box-sizing: content-box;
        height: 0;
        overflow: visible;
        margin-top: 1rem;
        margin-bottom: 1rem;
        border: 0;
        border-top: 1px solid rgba(0,0,0,.1);
      }
      section{
        .form{
          position: relative;
          .search{
            position: absolute;
            top: 0;
            right: 0;
            height: 100%;
          }
        }
      }
    }
  }
  .marT{
    margin-top: 20px;
  }
  .owner-wrapper{
    background-color: #fff;
    padding: 32px;
    margin-bottom: 20px;
    .owner-box{
      display: flex;
      align-items: center;
      .owner{
        margin-right: 40px;
      }
    }
    .updatedBtn{
      margin-left: 50px;
    }
  }
</style>
